<script setup>
//导入的包==============================================================================================
import {ref} from "vue";
import request from "@/utils/request.js";
import { ElMessage } from 'element-plus'
import router from "@/router/router.js";
//数据定义==============================================================================================
const userRegister = ref({
  userId:'',
  password:'',
  repeatPassword:''
});
const userRegisterRef = ref();


const checkRepeat = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请确认密码！'))
  } else if (value !== userRegister.value.password) {
    callback(new Error("两次密码不一致！"))
  } else {
    callback()
  }
}
const rules = {
  userId: [{ required: true, message: "请输入用户名",trigger: 'blur' }],
  password: [{ required: true, message: "请输入密码",trigger: 'blur' }],
  repeatPassword: [{ validator: checkRepeat,trigger: 'blur' }],
};




//方法定义==============================================================================================
const init = () => {
  console.log("我是页面初始化的方法");
  request.get('/list')
      .then((res) => {
        console.log(res)
        tableData.value= res.data;  // 将获取的数据存储在组件的 data 中
      })
      .catch((error) => {
        console.error('获取数据失败:', error);
      });
};
init();

const login=() => {
  console.log(user.value);  // 打印 user.value，确保它包含你期望的数据
  request.post('/login',user.value).then((res)=>{
    if(res.code=='200')
    {
      ElMessage.success('登录成功')
      router.push("/main")
    }
    else
    {
      ElMessage.error('登录失败')
    }
  })
}




</script>

<template>
  <div style="background-color: #586cbc;width: 100%; height: 100vh;
        display: flex;align-items: center;justify-content: center;">
    <div style="display: flex;align-items: center;justify-content: center;background-color: white;
              border-radius: 20px;overflow: hidden; width: 700px;height: 400px">
      <div style="flex: 1">
        <img src="../assets/register_img.png" style="width: 350px; height: auto;">
      </div>
      <div style="flex:1;" >
        <div style="font-size: 20px; font-weight: bold; color: #333; text-align: center;font-family: 'SimSun', '宋体', serif;">欢迎登录智享云盘</div>
        <div></div>

        <el-form :model="userRegister" ref="userRegisterRef" :rules="rules">
          <el-form-item prop="userId">
            <el-input style="width: 80%;margin-left: 40px;margin-top: 40px"  size="large" placeholder="请输入账号" v-model="userRegister.userId">
              <template #prefix>
                <el-icon><User /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input style="width: 80%;margin-left: 40px" size="large" show-password placeholder="请输入密码" v-model="userRegister.password">
              <template #prefix>
                <el-icon><Lock /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="repeatPassword">
            <el-input style="width: 80%;margin-left: 40px" size="large" show-password placeholder="请再次输入密码" v-model="userRegister.repeatPassword">
              <template #prefix>
                <el-icon><Lock /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-button style="width: 80%;margin-left: 40px" type="success" @click="login">注册</el-button>
        </el-form>

        <div style="display: flex;align-items: center;justify-content: center;margin-top: 10px">
          <div style="margin-top: 10px">已有账号？立即 </div><span class="custom-register" style="color: #0f9876; cursor: pointer;" @click="router.push('/login')">登录</span>
          <div style="margin-top: 10px;margin-left: 70px;">忘记密码</div>
        </div>
      </div>
    </div>
    <div >
    </div>
  </div>



</template>

<style scoped>
::v-deep .el-form-item__error {
  margin-left: 40px;
}
::v-deep .custom-register {
  margin-top:10px
}
</style>